<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>查询统计</el-breadcrumb-item>
      <el-breadcrumb-item>职工基本信息查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="30">
        <el-col :span="6" >
          <el-form ref="form"  label-width="90px">
            <el-form-item label="职工姓名:" class='worker-item'>
              <el-input placeholder="输入职工姓名模糊查询" v-model="queryInfo.name" clearable></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- <el-col :span="6" >
          <el-form ref="form"  label-width="50px" >
            <el-form-item label="性别:" class='worker-item'>
              <el-select v-model="queryInfo.sex" clearable placeholder="请选择">
                <el-option v-for="(item,index) in sexOptions" :key="index"  :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6" >
          <el-form ref="form"  label-width="90px" >
            <el-form-item label="身份证号:" class='worker-item'>
              <el-input placeholder="输入身份证号" v-model="queryInfo.idNumber" clearable></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="findWorker">查询职工</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="danger" @click="clearFilter">清除筛选</el-button>
        </el-col>
      </el-row>
      <h3>查询结果</h3>
      <!-- table表格区域 -->
      <el-table :data="workerList" border stripe :header-cell-style="{background:'#eee',color:'#606266',fontSize: '14px'}">
        <el-table-column type="index" label='序号' width="60px"></el-table-column>
        <el-table-column label="职工姓名" prop="name"></el-table-column>
        <el-table-column label="身份证号" prop="idNumber"></el-table-column>
        <el-table-column label="银行卡号" prop="cardNumber"></el-table-column>
        <!--        <el-table-column label="资金来源" prop="add_time" width="140px">-->
<!--          <template slot-scope="scope">-->
<!--            {{scope.row.add_time | dateFormat}}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="操作" width="130px">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>-->
<!--            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.goods_id)"></el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询参数对象
      queryInfo: {
        name: '',
        idNumber: '',
        // sex: '',
        gjjzh: '',
        pageNum: 1,
        pageSize: 10
      },
      sexOptions: ['男','女'],
      // 员工列表
      workerList: [],
      // 总数据条数
      total: 0
    }
  },
  created() {
    this.queryInfo.gjjzh = window.sessionStorage.getItem('gjjzh')
    this.getWorkerList()
  },
  methods: {
    // 根据分页获取对应的商品列表
    async getWorkerList() {
      const { data: { data: res }, data: meta } = await this.$http.post('/employee/findEmployeeList', this.queryInfo
      )
      console.log(res)
      if (meta.code !== 200) {
        return this.$message.error('获取职工信息失败！')
      }
      if (res.total == 0) {
        return this.$message.error('没有符合查询条件的职工！')
      }
      this.$message.success('获取职工信息成功！')
      this.workerList = res.records;
      // 处理男女数据格式
      this.total = res.total
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getWorkerList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getWorkerList()
    },
    findWorker() {
      this.getWorkerList()
    },
    clearFilter() {
      this.queryInfo.name = '';
      this.queryInfo.idNumber = '';
      this.queryInfo.sex = '';
      this.getWorkerList()
    }

  }
}
</script>

<style lang="less" >
  .worker-item .el-form-item__label{
    font-weight: bold;
    font-size: 16px;
  }
</style>
